<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>com.google.code.jqTools.firstExample</title>
        <meta name="author" content="konstantin.denerz">
        </meta>
        <script type="text/javascript" src="../libs/jquery-1.4.2.js">
        </script>
        <script type="text/javascript">
            /*
             Copyright (c) 2010 Konstantin Denerz
             Licensed under the MIT license (MIT-LICENSE.txt):
             http://www.opensource.org/licenses/mit-license.php
             */
            var toolsData = [];
            var maxSize = 100;
            var size = 30;
            var filterSize = 2;
            
            
            $(document).ready(function(){
            	// tools collection
                var tools = $("img");
                
                var calculateSize = function(event){
                
                    toolsData = [];
                    
                    var targetIndex = tools.index(event.target);
                    
                    var targetIndexInFilterArray = 0;
                    //FIXME: if targetIndex < 2, method should generate 2 mock tools for further calculation
                    var filteredTools = tools.filter(function(index){
                        return Math.abs(targetIndex - index) <= filterSize;
                    });
                    
                    filteredTools.each(function(index, element){
                        var elementData = {};
                        var offset = $(element).offset();
                        var currentMax = offset.left + $(element).width() / 2;
                        var zoomFactor = Math.abs(currentMax - event.clientX);
                        toolsData.push(zoomFactor);
                    });
                    //    toolsData => [7,5,3,8,6]
                    var maxZoomFactor = 0;
                    for (var index in toolsData) {
                        maxZoomFactor = Math.max(maxZoomFactor, toolsData[index]);
                    }
                    
                    var resizeArray = [];
                    for (var index in toolsData) {
                        var newSize = ((maxZoomFactor - toolsData[index]) * 100 / maxZoomFactor) * (maxSize - size) / 100;
                        resizeArray.push(newSize);
                    }
                    
                    tools.not(filteredTools).css("width", size).css("height", size);
                    
                    
                    var resizeSum = 0;
                    var targetIndexInFilterArray = filteredTools.index(event.target);
                    
                    filteredTools.each(function(index, element){
                        var newSize = size + resizeArray[index];
                        $(element).css("width", newSize).css("height", newSize).css("margin-top", -newSize);
                    });
                    
                    //TODO: refactoring
                    var toolbarWidth = 0;
                    tools.each(function(index, element){
                        toolbarWidth += $(element).width();
                    });
					
                    $("#toolbar").css("width", toolbarWidth + 10);
                };
                
                var resizeToolsTo = function(newSize){
                    tools.css("width", newSize).css("height", newSize);
                    
                }
                
                var resizeToolbarToDefault = function(){
                    $("#toolbar").css("width", tools.length * size);
                }
                
                var moveToolbar = function(){
                    $("#toolbar").css("margin-top", $(window).height() - 10 - $("#toolbar").height() + $(window).scrollTop());
                }
                
                resizeToolsTo(size); // default size
                resizeToolbarToDefault(); // default size
                moveToolbar();
                tools.mousemove(calculateSize);
                
                $("#toolbar").hover(null, function(){
                    resizeToolsTo(size);
                    tools.css("margin-top", 0).css("margin-left", 0);
                    resizeToolbarToDefault();
                });
                
                $("img").click(function(){
                    $(this).fadeOut("fast", function(){
                        $(this).fadeIn("slow");
                    });
                });
                
                
                
                // tool bar hooks used for demo
                $(window).resize(function(event){
                    moveToolbar();
                });
                $(window).scroll(function(event){
                    moveToolbar();
                });
                
            });
        </script>
        <style type="text/css">
            img {
                cursor: pointer;
            }
            
            #toolbar {
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div id="toolbar">
            <img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png"><img src="tool.png">
        </div>
    </body>
</html>